<!--
 * @Author: Bonnie
 * @Date: 2021-12-02 18:52:42
 * @LastEditTime: 2021-12-03 11:35:15
 * @LastEditors: Bonnie
 * @Description: 带有悬停效果的三角形
 * @FilePath: /public_demo/src/views/triangle_with_hover/index.vue
-->
<template>
  <div class="root-container">
    <div class="image-container">
      <div class="card" v-for="item in imgList" :key="item">
        <img :src="item" alt />
      </div>
    </div>
    <div class="mt40 left pl20">CSS剪辑路径生成器地址： https://bennettfeely.com/clippy/</div>
  </div>
</template>
<script>
import { ONLINE_SRC } from "@/utils/imgs";
export default {
  name: "index",
  data() {
    return {
      imgList: []
    };
  },
  created() {
    this.imgList = ONLINE_SRC.slice(0, 4);
  }
};
</script>
<style lang='scss' scoped>
.image-container {
  width: 600px;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 100px;
  .card {
    width: 300px;
    height: 300px;
    overflow: hidden;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    margin: 0 -70px;

    &:nth-child(2) {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    &:nth-child(4) {
      position: relative;
      left: 160px;
      top: 10px;
    }

    &:hover img {
      transform: scale(1.5);
    }
    img {
      transition: 0.5s;
      width: 100%;
    }
  }
}
</style>